<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">
<title>-webkit-animation-direction demo</title>


<link rel="stylesheet" type="text/css" href="animation-direction_002.css" media="all">
</head>
<body>
<h1>-webkit-animation-direction</h1>
<select id="direction" class="info_panel">
	<option value="normal">normal</option>
	<option value="alternate">alternate</option>
	<option value="alternate-reverse">alternate-reverse</option>
	<option value="reverse">reverse</option>
</select>
<div id="show_wrap">
	<div id="show_panel" class="show_panel">Ctrip携程2014 - Ctrip UED</div>
</div>
<script type="text/javascript">
	window.onload=function(){
		var showWrap=document.getElementById("show_wrap"),
			delay=document.getElementById("direction");

		delay.onchange=function(){
			var delayValue=this.value;

			showWrap.innerHTML="";
			showWrap.innerHTML='<div id="show_panel" class="show_panel">Ctrip携程2014 - Ctrip UED</div>';
			showPanel=Array.prototype.slice.call(showWrap.querySelectorAll('#show_panel'))[0];

			showPanel.style.webkitAnimationDirection=delayValue;
			showPanel.style.animationDirection=delayValue;
		}
	}
</script>


			</body>
</html>
